<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<link rel="stylesheet" href="js/bootstrap.min.js" />
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
	<link rel="shortcut icon" href="img/logo.jpg">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
	
	
	<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
    <script type="text/javascript" src="js/bootstrap-transition.js"></script>
    <script type="text/javascript" src="js/bootstrap-alert.js"></script>
    <script type="text/javascript" src="js/bootstrap-modal.js"></script>
    <script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
    <script type="text/javascript" src="js/bootstrap-scrollspy.js"></script>
    <script type="text/javascript" src="js/bootstrap-tab.js"></script>
    <script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
    <script type="text/javascript" src="js/bootstrap-popover.js"></script>
    <script type="text/javascript" src="js/bootstrap-button.js"></script>
    <script type="text/javascript" src="js/bootstrap-collapse.js"></script>
    <script type="text/javascript" src="js/bootstrap-carousel.js"></script>
    <script type="text/javascript" src="js/bootstrap-typeahead.js"></script>
    <script type="text/javascript" src="js/bootstrap-affix.js"></script>
    <script type="text/javascript" src="js/application.js"></script>
	<style type="text/css">
		.navbar{
			background-color:#999999;
		
		}
		body{
			background-color:#F3F1EC;
		
		
		.span6{
			border: 1px solid #DADEE5;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			margin: 0;
			padding: 15px 30px;
			height:auto;
			
		}
		#word{
			background:#F0F5F8;
		    
		}
		
		
	</style>
</head>
<body>
	<div id="container">
		<%@ include file="top.jsp"%>
		<div id="content">
			
			<div id="left" class="span3">
				<%@ include file="lefttop.jsp" %>
				<%@ include file="leftdown.jsp" %>
				
			</div>
			
			<div class="span6" >
				<div id="word" style="background:#F0F5F8;border: 1px solid #DADEE5;border-top-left-radius: 5px;border-top-right-radius: 5px;margin: 0;padding: 15px 30px;">
					<h5><b><h4>Add a new deal</h4></b></h5>
					
				</div>
				
				<div class="form" style="background:#fff; padding:20px;">
					<form action="savedeal.action" method="post">
					<input type="hidden" name="user.username" value="${session.nowUser.username}"/>
						<div class="info"><b> <h4> Who's this deal with?</h4></b></div>
						<span>Type the name of the other person or company</span><br>
						<img  style="display: none" id="persona" src="img/person.png">
						<img  style="display: none" id="companya" src="img/company.png">								
						<select name="dealtype.keya" style="width:100px">
								<option >Person</option>
								<option >Company</option>
						</select>
						<input type="hidden" value="${session.nowUser.id }" name="dealtype.userid">
						<input type="text" name="dealtype.valuea" class="span3" id="deala"/><br />
						<a id="person" href="#">Create a new person</a> with that name or 
						<a id="company" href="#">Create a new company</a>.
						<span></span>
						<div class="info"><b> <h4> Name the deal</h4></b></div>
						<input type="text" name="deal.name" class="span4"/><br />
					
						<div class="info"><b> <h4> Describe the deal</h4></b></div>
						<textarea name="deal.cont" cols="80" rows="5" class="span4"></textarea>
						
						<div class="info"><b> <h4> How much?</h4></b></div>
						<select name="deal.moneytype" style="width:90px;">
							<option>$</option>
							<option>￥</option>
							<c:forEach items="${moneytype}" var="type">
								<option>${type.keya}</option>
							</c:forEach>
						</select>
						<input type="text" name="deal.money"class="span2"/>
						<select name="deal.state" id="" class="span2">
							<option>Fix </option>
							<option >per hour</option>
							<option >per day </option>					
						</select>
						<div class="info"><b> <h4> Category</h4></b></div>
						<div style="padding-bottom:15px; border-bottom:2px solid #999999;">
							<select name="deal.type" id="">
								<option >Copywriting</option>
								<option >Project</option>
								<option >Web Design</option>
								<option >UI Design</option>
							</select>
							<a href="#" > Edit categories</a>
						</div>
						<input type="hidden" name="deal.userid" value="${session.nowUser.id }">
						<input type="hidden" name="deal.view" value="Pending"/>
							<div style="margin-top:10px;">
							<button type="submit">add this deal </button>or <a href="adddeal.action">cancel</a>
						</div>					
					</form>								
				</div>			
			</div>
			<div class="span3">
				<div class="taskbox" style="background:#f8f8f8;">
					<div class="boxcontent" style=" padding: 12px 15px;margin: 0;border:1px solid #DADEE5;">
						<p><b>What is a deal?</b></p>
						<hr style="margin:5px;"/>
						<p style="font-size:12px;">A deal is a money-based project you have up for bid or contract. Deals let you keep track of proposals, bids, RFPs, and project sales right inside Highrise. Highrise has always been great for keeping track of the people you do business with, but now with Deals you can keep track of the business transactions as well.
						</p>
						
					</div>
				
				</div>
			
			</div>			
		
		</div>
			
	</div>
	<script type="text/javascript">
			$(document).ready(function () {  
				$("#company").click(function(){
					
					$("#persona").hide();
					$("#companya").show();
					
				});	
				$("#person").click(function(){
					$("#companya").hide();
					$("#persona").show();
				});			
				$(".tip").tooltip();
			});  
	
	
	
	</script>




	
</body>
</html>